<template>
  <a-row :gutter="10" class="video-card-container">
    <a-col :span="16">
      <div>
        <img :src="props.info.fileUrl || defaultImg" alt="" style="border-radius: 2px;">
      </div>
      <div>
        <div class="mb-10">{{ $t('basicData.styleNo') }}：{{props.info.styleNo}}</div>
        <div>{{ $t('basicData.styleNa') }}：{{props.info.styleName}}</div>
      </div>
    </a-col>
    <a-col :span="8"> 
      <div>
        <div>{{ $t('video.processVerNumber') }}</div>
        <p>{{ statisticsInfo.processVersionCount }}</p>
      </div>
      <div class="px-20">
        <div>{{ $t('video.processTotal') }}</div>
        <p>{{ statisticsInfo.processCount }}</p>
      </div>
      <!--<div class="pr-25">-->
      <!--  <div>视频数合计</div>-->
      <!--  <p>/</p>-->
      <!--</div> -->
    </a-col>
  </a-row>
</template>
<script setup>
import { watch } from "vue"
import axios from '@/utils/request'
import {ref} from 'vue'
let props = defineProps({
  info: {
    type: Object,
    default: () => {}
  }
})
let defaultImg = require('../../../../assets/images/defaultImg.png')
let statisticsInfo = ref({})
const getInfo = async () => {
  try {
    const res = await axios.postAction('/api/monitor/beat/statisStyle', {styleId: props.info.styleId})
    statisticsInfo.value =res.success ? res.data || {} : {}
  } catch {
    statisticsInfo.value = {}
  }
}
watch(() => props.info, (val) => {
  if(val?.styleId)getInfo() 
}, { deep: true, immediate: true })
</script>
